<template>
    <div class="chaxun">
        <div class="cx-select" style="padding-bottom:15px;">
            <el-input placeholder="请输入内容" v-model="selectData.equipName" @change="getList()">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <div class="cx-list">
            <ul>
                <li :class="{active:index==activeIndex}" style="display:flex;flex-wrap: wrap" v-for="(item,index) in equipList" :key="item.value" @click="selectItem(index,item.equipId,item.siteId)">
                    <div>
                        设备名称：{{item.equipName}}
                    </div>
                    <div>
                        设备编号：{{item.equipId}}
                    </div>
                    <div style="flex:0 0 95%">
                        设备类型：{{item.equipSize}}
                    </div>
                    <div style="flex:0 0 5%">
                        <i class="iconfont icon-jiantou-copy" style="color:#409eff;"></i>
                    </div>
                    <div>
                        设备状态：{{item.equipStatus}}
                    </div>
                    <div>
                        安装片区：{{item.areaName}}
                    </div>
                    <div>
                        安装点位：{{item.siteName}}
                    </div>
                </li>
            </ul>
        </div>
        <button type="button" class="btn btn-block btn-primary" @click="nextDo">下一步</button>
    </div>
</template>

<script>
import utils from "@/utils";
import { getUserInfo, setUserInfo, logout } from "@/utils/auth";
export default {
  data() {
    var loading = "";
    return {
      activeIndex: 0,
      equipList: "",
      selectData: {
        equipName: "",
        equipType: "",
        areaId: "",
        pageNum: "1",
        pageSize: 10
      },
      itemEquipId: "",
      itemSiteId: ""
    };
  },
  created() {
    setUserInfo(utils.getQueryString("token"));
    // console.log(utils.getQueryString('token'))
    console.log(utils.getQueryString("frid"));
  },
  mounted() {
    this.getList();
    this.windowscroll();
  },
  methods: {
    selectItem(index, equipId, siteId) {
      this.activeIndex = index;
      this.itemEquipId = equipId;
      this.itemSiteId = siteId;
      console.log(index);
    },
    nextDo() {
      this.$router.push({
        path: "shangbao",
        query: { equipId: this.itemEquipId, siteId: this.itemSiteId }
      });
    },
    //获取列表
    getList() {
      this.$api.chaxun.equiplist(this.selectData).then(res => {
        if (res.success) {
          this.equipList = res.data.equipList.list;
          this.itemEquipId = res.data.equipList.list[0].equipId;
          this.itemSiteId = res.data.equipList.list[0].siteId;
        }
      });
    },
    //加载
    windowscroll() {
      var that = this;
      $(window).on("scroll", function() {
        //给window绑定scroll触底事件
        // console.log($(window).scrollTop() + $(window).height() + 1 + ',' + $(document).height())
        if (
          $(window).scrollTop() + $(window).height() + 1 >
          $(document).height()
        ) {
          // $(".nextPage").trigger("click")
          that.selectData.pageSize += 10;
          that.getList();
        }
      });
    }
  }
};
</script>

<style>
</style>
